<!--
 * @Author: 曹哈哈 2273766442@qq.com
 * @Date: 2024-11-01 16:23:56
 * @LastEditors: 曹哈哈 2273766442@qq.com
 * @LastEditTime: 2024-11-01 16:33:32
 * @FilePath: \management-mini-program\src\pages\main\parkingLot\modal\channel\ChannelForm.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <view>
        <tn-popup
            v-model="isPopupVisible"
            width="95%"
			height="90%"
            open-direction="bottom"
            @close="close"
            close-btn>
            <view class="tn-m-sm tn-p-sm  tn-mb-xl">
                <view class="tn-mb-xl">
                    <tn-title
                        size="lg"
                        :title="(formType == 'create' ? '新增' : '修改') + '-费率'"
                        mode="hLine"
                        sub-title="VehicleType"
                        assist-color="tn-blue" />
                </view>
				<tn-form ref="formRef" :model="formData" label-position="top">
				    
			 
               <scroll-view  style="height: 50vh" scroll-y="true"   >
                  
                  <tn-form-item   prop="parkLotName">
                    <template #label>
                      <tn-title   title="所属车场" mode="dot" sub-title="parkLotName" assist-color="tn-blue" />
                    </template>
                    <tn-input v-model="formData.carPlate"  disabled :border="customStyleBorder"   :custom-style="customStyleInput"></tn-input>
                   
                  </tn-form-item>
                  	 <tn-form-item label="车型">
                  <tn-bubble-box :options="COUPON_TYPE" position="bottom" @click="confirmBubble(COUPON_TYPE, 'couponType', $event)">
                  	<tn-input style="pointer-events:none" :model-value="pickerDict.label.couponType[formData.couponType]"  />
                  </tn-bubble-box>
                  	 </tn-form-item>
					 
					 
					 <tn-form-item label="计费类型">
					 <tn-bubble-box :options="COUPON_TYPE" position="bottom" @click="confirmBubble(COUPON_TYPE, 'couponType', $event)">
					 	<tn-input style="pointer-events:none" :model-value="pickerDict.label.couponType[formData.couponType]"  />
					 </tn-bubble-box>
					 	 </tn-form-item>
				  <tn-form-item label="所属车库">
				  <tn-bubble-box :options="COUPON_TYPE" position="bottom" @click="confirmBubble(COUPON_TYPE, 'couponType', $event)">
				  	<tn-input style="pointer-events:none" :model-value="pickerDict.label.couponType[formData.couponType]"  />
				  </tn-bubble-box>
				  	 </tn-form-item>
					 
					 <tn-form-item label="收费类型">
					 <tn-bubble-box :options="COUPON_TYPE" position="bottom" @click="confirmBubble(COUPON_TYPE, 'couponType', $event)">
					 	<tn-input style="pointer-events:none" :model-value="pickerDict.label.couponType[formData.couponType]"  />
					 </tn-bubble-box>
					 	 </tn-form-item>
						 
						 <tn-form-item   >
						   <template #label>
						     <tn-title   title="备注" mode="dot" sub-title="parkLotName" assist-color="tn-blue" />
						   </template>
						   <tn-input v-model="formData.carPlate"  disabled :border="customStyleBorder"   :custom-style="customStyleInput"></tn-input>
						  
						 </tn-form-item>
                </scroll-view>  
				
				</tn-form>
            </view>

            <view class="floating-button tn-flex justify-center tn-mt-xl"
                ><tn-button
                    @click="confirmEdit"
                    width="80%"
                    size="xl"
                    text-color="tn-white"
                    bg-color="tn-gradient-bg__cool-8"
                    >提 交</tn-button
                ></view
            >
        </tn-popup>
    </view>
</template>

<script setup lang="ts">
    import { defineEmits, ref, reactive } from "vue"; 
	import { onLoad } from "@dcloudio/uni-app";
	import {   COUPON_TYPE } from "@/utils/dict"; // 引入字典
	
	//表单配置处理-背景样式处理
	const customStyleInput=ref( {backgroundColor:'#ededed75'}) 
	const customStyleBorder=ref( false) 
    const pkId = ref();

    const isPopupVisible = ref(false);
    const formType = ref(""); // 表单的类型：create - 新增；update - 修改
    const formData = ref({
        id: undefined,
        roleName: undefined,
        roleIds: [],
    });
    const formRef = ref(); // 表单 Ref

    /** 打开弹窗 */
    const open = async (type: string, id?: number) => {
        isPopupVisible.value = true;
        formType.value = type;

        // 修改时，设置数据
        if (id) {
            // 设置修改主键
            pkId.value = id;
            try {
                // getDeatilById 获取formData 数据
            } catch {}
        }
    };
    defineExpose({ open }); // 提供 open 方法，用于打开弹窗
    const close = () => {
        isPopupVisible.value = false;
    };
    // 字典处理-字典枚举映射
    const pickerDict = ref({
    	dict: {
        couponType: COUPON_TYPE
    	},
    		label: {couponType:{}}
    });
    
    // 字典处理-处理字典数据格式
    const getDictLabel = () => {
    	pickerDict.value.label = {};
    	for (let key in pickerDict.value.dict) {
    		let dict = pickerDict.value.dict[key];
    		pickerDict.value.label[key] = dict.reduce((acc, cur) => {
    			acc[cur.value] = cur.label;
    			return acc;
    		}, {});
    	}
    };
	
	
  onLoad(() => {
	getDictLabel();
});
</script>

<style>
	.floating-button {
		position: fixed;
		/* 固定定位 */
		bottom: 20rpx;
		/* 距离底部20rpx */
		left: 0;
		/* 左对齐 */
		right: 0;
		/* 右对齐 */
		margin: 0 auto;
		/* 居中 */
	}
	
	.tn-tabbar-height {
			min-height:100rpx;
			height: calc(100rpx + env(safe-area-inset-bottom) / 2);
			height: calc(100rpx + constant(safe-area-inset-bottom));
		} 
</style>
